<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>林业局抽奖</title>
		<link rel="stylesheet" href="css/style.css" />
	</head>
	<body>
		<div class="bg" style="background: url(img/bg2.jpg) no-repeat; background-size: 100% 100%;">
			<div class="head">
				<div class="title"><img src="img/logo.png" alt="" style="width:20%"/><img src="img/title.png" alt="" class="img-tltle" style="width:60%"/></div>
				<div class="full"><img src="img/full.png" alt="" id="fullclick"/></div>
				<div style="position: absolute; top: 2%; right: 9.5%;">
					<img src="img/erweima_03.jpg" alt="" width='80' style="padding-top: 15px"/>
				</div>
			</div>
			<div class="bd">
				    <div class="tp-title">
				    	投票排名
				    </div>
					<div class="tp-pm">
						<ul id="top3">
							 <!--<li>
								<div class="mun">
									1st
								</div>
								<div class="pic"><img src="img/6.jpg" alt="" /></div>
								<div class="tp-name">某某某</div>
								<div class="rank-jd">
									<div class="mounter  mounter1">								
									</div>
								</div>
								<div class="allmun">
									1000
								</div>
							</li>
							<li>
								<div class="mun">
									2nd
								</div>
								<div class="pic"><img src="img/6.jpg" alt="" /></div>
								<div class="tp-name">某某某</div>
								<div class="rank-jd">
									<div class="mounter  mounter1">								
									</div>
								</div>
								<div class="allmun">
									1000
								</div>
							</li>
							<li>
								<div class="mun">
									3rd
								</div>
								<div class="pic"><img src="img/6.jpg" alt="" /></div>
								<div class="tp-name">某某某</div>
								<div class="rank-jd">
									<div class="mounter  mounter1">								
									</div>
								</div>
								<div class="allmun">
									1000
								</div>
							</li> -->
						</ul>
						<ul id="top6">
							 <!--<li>
								<div class="mun">
									4th
								</div>
								<div class="pic"><img src="img/6.jpg" alt="" /></div>
								<div class="tp-name">某某某</div>
								<div class="rank-jd">
									<div class="mounter  mounter1">								
									</div>
								</div>
								<div class="allmun">
									1000
								</div>
							</li>
							<li>
								<div class="mun">
									5th
								</div>
								<div class="pic"><img src="img/6.jpg" alt="" /></div>
								<div class="tp-name">某某某</div>
								<div class="rank-jd">
									<div class="mounter  mounter1">								
									</div>
								</div>
								<div class="allmun">
									1000
								</div>
							</li>
							<li>
								<div class="mun">
									6th
								</div>
								<div class="pic"><img src="img/6.jpg" alt="" /></div>
								<div class="tp-name">某某某</div>
								<div class="rank-jd">
									<div class="mounter  mounter1">								
									</div>
								</div>
								<div class="allmun">
									1000
								</div>
							</li> -->
						</ul>
					</div>
					<span class="hoster" style="padding-top: 0%;">
						<p >主办：<span style="letter-spacing: 0.78px;">上 &nbsp;&nbsp;&nbsp;海&nbsp;&nbsp;&nbsp;市&nbsp;&nbsp;&nbsp;林&nbsp;&nbsp;&nbsp;业 &nbsp;&nbsp;&nbsp;局</span></p>
                        <p> 承办：上海市林业病虫防治检疫站</p>
                        <p style="letter-spacing: 1.8px;">上 &nbsp;&nbsp;海 &nbsp;&nbsp;市 &nbsp;&nbsp;林&nbsp;&nbsp;学&nbsp;&nbsp;会 </p>
					</span>
					
				
				
			</div>
		</div>
		<script type="text/javascript" src="js/jquery-2.2.3.min.js" ></script>
		<script type="text/javascript" src="js/jquery.fullscreen.js" ></script>
		<script>
			
			$(document).ready(function(){
				$("#fullclick").click(function(){
					$(".bg").fullScreen();
					e.preventDefault();
				});

				$.getJSON("/welcome/rankingpc",function(datas){
					var data = datas['list'];
					var total = datas['total']['total'];
					// var total = data[0]['vote_count'];

					var str1 = '';
					for (var i = 0; i < 3; i++) {

						var tmp = '';
						switch(i){
							case 0:
							  tmp='1st';
							  break;
							case 1:
							  tmp='2nd';
							  break;
							case 2:
							  tmp='3rd';
							  break;							  
							default:
								tmp='no';
						}

						str1 += '<li><div class="mun">'+tmp+'</div><div class="pic"><img src="/'+data[i]['headimgurl']+'" alt="" /></div><div class="tp-name">'+data[i]['username']+'</div><div class="rank-jd"><div class="mounter  " data="'+(data[i]['vote_count']/total*100)+'%">	</div></div><div class="allmun">'+data[i]['vote_count']+'</div></li>';
					}

					$("#top3").html(str1);

					var str2 = '';
					for (var i = 3; i < 6; i++) {
						str2 += '<li><div class="mun">'+(i+1)+'th</div><div class="pic"><img src="/'+data[i]['headimgurl']+'" alt="" /></div><div class="tp-name">'+data[i]['username']+'</div><div class="rank-jd"><div class="mounter" data="'+data[i]['vote_count']/total*100+'">	</div></div><div class="allmun">'+data[i]['vote_count']+'</div></li>';
					}

					$("#top6").html(str2);

					$(".mounter").each(function(){
						$(this).animate({width:$(this).attr('data')},2000);
					});
				})

			});
	
			
		</script>
</html>
